<template>
  <Content title="异常停机">
    <view class="all-view">
      <view class="header-box">
        <u-search
          placeholder="请输入设备编码搜索"
          v-model="search.name"
          :clearabled="true"
          :showAction="false"
          @search="query"
        ></u-search>
        <MyNavList :data="navData" v-model="navIndex"></MyNavList>
      </view>
      <view class="tab_content">
        <scroll-view class="list" style="height: 450px;" :scroll-y="true" @scrolltolower="nextPage()" v-if="list.length !== 0">
          <view
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="goto(item)"
          >
            <view class="left">
              <view class="icon">
                <u-icon
                  v-if="navIndex == 0"
                  name="play-circle"
                  color="#33c91a"
                  size="24"
                ></u-icon>
                <u-icon
                  v-if="navIndex == 1"
                  name="pause-circle"
                  color="#ff406c"
                  size="24"
                ></u-icon>
                {{ navIndex == 0 ? "运行" : "停机" }}
              </view>
              <view class="text">
                <view class="device-no"> 设备编号 {{ item.deviceNo }} </view>
                <view class="device-info">
                  设备品牌 {{ item.brand || "--" }}
                </view>
              </view>
            </view>
            <view class="right" v-if="navIndex == 0">
              <u-tag
                :text="item.deviceState"
                size="mini"
                bgColor="#eaf7f5"
                borderColor="#5ca9e4"
                color="#5ca9e4"
                style="margin-right: 10rpx"
                @click="goto(item)"
              ></u-tag>
              <u-icon name="arrow-right" color="#ccc" size="12"></u-icon>
            </view>
          </view>
        </scroll-view>
        <view v-else class="empty"> 暂无数据 </view>
      </view>
    </view>
  </Content>
</template>

<script>
import MyNavList from "@/components/myNavList.vue";
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import { getUserInfo } from "@/store/user";

export default {
  components: {
    MyNavList,
    Content,
  },
  data() {
    return {
      search: {
        name: "",
      },
      navIndex: 0,
      navData: [
        {
          label: "未停机设备",
        },
        {
          label: "停机设备",
        },
      ],
      list: [],
	  pageNum:1,
	  total:0,
    };
  },
  watch: {
    navIndex() {
      this.list = [];
	  this.pageNum=1;
	  this.total=0;
      this.query();
    },
  },
 //  mounted() {
	// this.list=[]
 //    this.query();
 //  },
  methods: {
	  nextPage(){
		  console.log(1)
		  this.pageNum+=1;
		  if ((this.total-(this.pageNum*10))>0){
		  	this.query()
		  }
	  },
    query() {
      this.$loading.open();
      const obj = {
        pageNum: this.pageNum,
        pageSize: 20,
        userId: getUserInfo().userId,
      };
      if (this.search.name !== "") obj.deviceNo = this.search.name;
      if (this.navIndex === 0) {
        obj.deviceState = "未停机设备";
      } else {
        obj.deviceState = "停机设备";
      }
      fetch("get", "/dms/mobile/getAbnormalShutdown", obj)
        .then(res => {
		  this.total=res.data.total;
          this.list = this.list.concat(res.data.records);
		  console.log('OK')
          this.$loading.close();
        })
        .finally((res) => {
          this.$loading.close();
        });
    },
    goto(item) {
      uni.navigateTo({
        url:
          "/pages/staging/abnormal-shutdown/details?item=" +
          encodeURIComponent(JSON.stringify(item)),
        animationType: "pop-in",
      });
    },
  },
  onShow() {
	this.list=[]
    this.query();
  },
};
</script>

<style scoped lang="scss">
.all-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-box {
  padding: 5px 10px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.input-box {
  display: flex;
  align-items: center;
  overflow: auto;
  margin-bottom: 10px;

  .my-select-box {
    flex: 1;
    background-color: #f3f5f6;
    margin-right: 20rpx;
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 5px;

    /deep/ .my-select {
      width: 180rpx;
    }
  }

  /deep/ .u-input {
    border: none;
    background-color: transparent;
  }
}

.tab_content {
  flex: 1;
  background: #fafafb;
  display: flex;

  .empty {
    flex: 1;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #999;
  }

  .list {
    flex: 1;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    box-shadow: 1px 1px 3px #eee;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px 0 0;
        border-right: 1px solid #ccc;
        min-width: 55px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 20px;

        .device-no {
          font-weight: bold;
        }
      }
    }
    .right {
      margin-left: 10px;
      min-width: 40px;
      display: flex;
      position: relative;
      top: 1px;
    }
  }
}
</style>
